/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form,  Input ,InputNumber,Radio,TreeSelect,Select,Collapse,Button,message,Card,Icon,Row,Col} from 'antd';
import {connect} from 'dva';
import './index.less'
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const Panel = Collapse.Panel;
let uuid=1;
class EditUserArchives extends Component {
  constructor(props) {
    super(props);
    this.state = {
      meterArr:[uuid],
      meterActiveKey:['1']
    };
  }
  renderTreeNodes=(data)=>{
    return data.map((item) => {
      if (item.children) {
        return (
          <TreeNode value={item.id} title={item.name} key={item.id} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return  <TreeNode value={item.id}  title={item.name} key={item.id} />
    });
  }
  addMeter=()=>{
    uuid++;
    this.state.meterArr.push(uuid)
    this.state.meterActiveKey.push(uuid.toString())
    this.setState({
      meterArr:this.state.meterArr,
      meterActiveKey:this.state.meterActiveKey
    })
  }
  deleteMeter=(item)=>{
    console.log('删除的item',item)
    if(this.state.meterArr.length===1){
      console.log('只有一个水表')
      message.error('至少需要一个水表')
      return false
    }
    const index=this.state.meterArr.indexOf(item);
    console.log('index',index)
    this.state.meterArr.splice(index, 1);
    this.setState({
      meterArr:this.state.meterArr
    })
  }
  changeMeterPanel=(keys)=>{
    console.log('keys',keys)
    this.setState({
      meterActiveKey:keys
    })
  }
  renderDMATreeNodes=(data)=>{
    return data.map((item) => {
      if (item.children&&item.children.length>0) {
        return (
          <TreeNode value={item.id}  title={item.name} key={item.id}>
            {this.renderDMATreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode value={item.id} title={item.name} key={item.id}/>
    });
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      }
    };
    const formItemLayoutWithLabel2 = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 7},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 17},
      }
    };
    const {getFieldDecorator, getFieldValue} = this.props.form;
    const company_code = sessionStorage.getItem('company_code');

    const meterForms=this.state.meterArr.map((item,index)=>{
      return (
        <Col  span={8}>
        <Card  size="small"
               title={<div>水表-{index+1}  <Button onClick={(e)=>{e.stopPropagation();this.deleteMeter(item)}}
                                                                                   size="small" style={{float:'right',marginRight:'10px'}} type="danger">删除</Button>  </div>}
               key={item.toString()} >
          <Form key={index}>
            <FormItem
              label={'水表号'}
              {...formItemLayoutWithLabel2}
            >
              {getFieldDecorator(`meter_number-${item}`, {
                initialValue: '',
              })(
                <Input />
              )}
            </FormItem>
            <FormItem
              label={'用水性质'}
              {...formItemLayoutWithLabel2}
            >
              {getFieldDecorator(`meter_number-${item}`, {
                initialValue: '',
              })(
                <Select>
                  {
                    [{key:'1',value:'生活有下水'},{key:'2',value:'生活无下水'}].map((item,index)=>{
                      return <Option key={index} value={item.key}>{item.value}</Option>
                    })
                  }
                </Select>
              )}
            </FormItem>
            <FormItem
              label={'报警金额'}
              {...formItemLayoutWithLabel2}
            >
              {getFieldDecorator('reader', {
                initialValue: '',
              })(
                <Input />
              )}
            </FormItem>
            <FormItem
              label={'欠费关阀'}
              {...formItemLayoutWithLabel2}
            >
              {getFieldDecorator('sex', {
                initialValue: 1,
              })(
                <Select >
                  { [{key:1,value:'不关阀'},{key:2,value:'关阀'}].map(item => <Option key={item.key} value={item.key}>{item.value}</Option>) }
                </Select>
              )}
            </FormItem>

          </Form>
        </Card>
        </Col>
      )
    })
    return (
      <div>

        <Collapse activeKey={['1','2']} >
          <Panel header={'户主基本信息'} key="1" showArrow={false}>
            <Form onSubmit={this.handleSubmit}>
              <FormItem
                style={{width:'33%',display:'inline-block'}}
                label={'户主姓名'}
                {...formItemLayoutWithLabel}
              >
                {getFieldDecorator('number', {
                  initialValue: '',
                })(
                  <Input  />
                )}
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
                label={'户主手机'}>
                {getFieldDecorator('village_id', {
                  initialValue: '',
                })(
                  <Input  />
                )}
              </FormItem>
              <FormItem
                label={'身份证号码'}
                style={{width:'33%',display:'inline-block'}}
                {...formItemLayoutWithLabel}
              >
                {getFieldDecorator('身份证号码', {
                  initialValue: '',
                })(
                  <Input />
                )}
              </FormItem>
              <FormItem
                {...formItemLayoutWithLabel}
                style={{width:'33%',display:'inline-block'}}
                label={'户主地址'}
              >
                {getFieldDecorator('address', {
                  initialValue: '',
                })(
                  <Input />
                )}
              </FormItem>

              <FormItem
                style={{width:'33%',display:'inline-block'}}
                label={'户主人数'}
                {...formItemLayoutWithLabel}
              >
                {getFieldDecorator('email', {
                  initialValue: '',
                })(
                  <Input />
                )}
              </FormItem>
              <FormItem
                label={'备注'}
                style={{width:'33%',display:'inline-block'}}
                {...formItemLayoutWithLabel}
              >
                {getFieldDecorator('reader', {
                  initialValue: '',
                })(
                  <Input />
                )}
              </FormItem>
            </Form>
          </Panel>
          <Panel header={'绑定水表'} key="2" showArrow={false} extra={ <Button   className={'btn-cyan'} type="primary"  size={'small'} onClick={this.addMeter}>{'添加水表'}</Button>}>

            <Row  gutter={10}>
              {meterForms}
            </Row>

          </Panel>
        </Collapse>
      </div>
    );
  }
}

const EditUserArchivesFormWrap = Form.create()(EditUserArchives);
export default connect()(EditUserArchivesFormWrap);
